<template>
  <van-nav-bar
    :title="this.$route.params.name"
    left-arrow
    @click-left="onClickLeft"
  />
  <ul class="main">
    <li v-for="item in dataList" :key="item.id">
      <div
        class="left"
        v-if="this.$store.state.user.profile?.user_id != item.user_id"
      >
        <div class="avatar-left">
          <van-image round width="3rem" height="100%" :src="item.user_avatar" />
        </div>
        <div class="avatar-right">
          <p class="p1">
            {{ item.user_name }}
            <span style="color: #ccc">{{ item.createtime }}</span>
          </p>
          <p class="p2">{{ item.content }}</p>
        </div>
      </div>
      <div
        class="right"
        v-if="this.$store.state.user.profile?.user_id == item.user_id"
      >
        <div class="avatar-left">
          <van-image round width="3rem" height="100%" :src="item.user_avatar" />
        </div>
        <div class="avatar-right">
          <p class="p1">
            <span style="color: #ccc">{{ item.createtime }}</span>
            {{ item.user_name }}
          </p>
          <p class="p2">{{ item.content }}</p>
        </div>
      </div>
    </li>
  </ul>
  <van-field
    style="height: calc(30% - 46px); padding-top: 2rem; padding-bottom: 0"
    v-model="commentValue"
    autosize
    rows="4"
    size="large"
    type="textarea"
    placeholder="请输入您的评论..."
    @keyup.enter="handleReply"
  />
</template>

<script>
import { onMounted, ref, getCurrentInstance } from "vue";
import { getContentList, sendContent, sendOut } from "@/api/contact";
import { gitUsermessage } from "@/api/home";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import moment from "moment";
export default {
  name: "",
  setup() {
    const store = useStore();
    const route = useRoute();

    const { proxy } = getCurrentInstance();
    var pubsub = proxy.$goeasy.pubsub;

    const dataList = ref([]);
    const commentValue = ref("");

    const onClickLeft = () => history.back();

    const getDataList = () => {
      const query = {
        user_id: store.state.user.profile.user_id,
        cover_user_id: route.params.id,
      };
      getContentList(query)
        .then((res) => {
          res.data.forEach((item) => {
            item.createtime = moment(item.createtime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          dataList.value = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    };

    onMounted(() => {
      getDataList();
    });

    const handleReply = () => {
      let cover_user_avatar;
      gitUsermessage(route.params.id)
        .then((res) => {
          cover_user_avatar = res.data.user_avatar;
          const obj = {
            user_name: store.state.user.profile.user_name,
            user_avatar: store.state.user.profile.user_avatar,
            content: commentValue.value,
            user_id: store.state.user.profile.user_id,
            cover_user_id: route.params.id,
            cover_user_name: route.params.name,
            cover_user_avatar: cover_user_avatar,
          };
          // 发送消息
          pubsub.publish({
            channel: store.state.user.profile.user_id, //替换为您自己的channel
            message: JSON.stringify(obj), //替换为您想要发送的消息内容
            onSuccess: function () {
              const params = {
                user_id: store.state.user.profile.user_id,
                cover_user_id: route.params.id,
                user_name: store.state.user.profile.user_name,
                user_avatar: store.state.user.profile.user_avatar,
                content: commentValue.value,
                createtime: moment().format("YYYY-MM-DD HH:mm:ss"),
              };
              sendContent(params)
                .then((res) => {
                  if (res.status === 200) {
                    getDataList();
                    commentValue.value = "";
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            },
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    // 接受消息
    pubsub.subscribe({
      channel: store.state.user.profile.user_id, //替换为您自己的channel
      onMessage: function (message) {
        const {
          user_id,
          user_name,
          user_avatar,
          content,
          cover_user_id,
          cover_user_name,
          cover_user_avatar,
        } = JSON.parse(message.content);
        const params = {
          user_id,
          cover_user_id,
          user_name,
          user_avatar,
          cover_user_name,
          cover_user_avatar,
          content,
          createtime: moment().format("YYYY-MM-DD HH:mm:ss"),
        };
        sendOut(params);
        setTimeout(() => {
          getDataList();
        }, 1000);
      },
    });

    return {
      onClickLeft,
      dataList,
      commentValue,
      handleReply,
    };
  },
};
</script>
<style scoped lang="less">
.main {
  padding: 0.5rem 0.6rem;
  height: 70%;
  background-color: #fff;
  overflow-y: auto;
  li {
    height: 3rem;
    margin-bottom: 2rem;
    p {
      margin: 0;
    }
    .p1 {
      font-size: 0.7rem;
      margin-left: 1rem;
      margin-bottom: 0.2rem;
    }
    .p2 {
      font-size: 0.8rem;
      margin-left: 1rem;
      padding: 0.3rem 0.5rem;
      border: 0.01rem solid #ccc;
      height: auto;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
  }
  .left {
    .avatar-left {
      height: 100%;
      float: left;
    }
    .avatar-right {
      float: left;
      width: calc(100% - 4rem);
    }
  }
  .right {
    .avatar-left {
      height: 100%;
      float: right;
    }
    .avatar-right {
      float: right;
      width: calc(100% - 4rem);
    }
    p {
      text-align: right;
    }
    .p1 {
      margin-right: 1rem;
    }
    .p2 {
      margin-right: 1rem;
    }
  }
}
</style>
